<template name="fjjImages">
	<view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
					:data-url="imgList[index]">
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='iconfont icon-shanchu'></text>
					</view>
				</view>
				<view class="bg-img videobox" v-if="src">
					<video id="myVideo" mode="aspectFill" :src="'https://chijiuanquan.com/'+src"  @tap="playvideo" @fullscreenchange="fullscreenchange"></video>
					<view class="cu-tag bg-red" @tap.stop="delectVideo" :data-index="index">
						<text class='iconfont icon-shanchu'></text>
					</view>
				</view>
				<view class="solids" @tap="chooseVideoImage" v-if="imgList.length<imgCount && (!src)">
					<text class='iconfont icon-paizhao'></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		props: {
			pageImgList: {
				type: Array,
				required: true,
				default () {
					return [];
				}
			},
			imgCount: {
				type: Number,
				default: 9
			}

		},
		watch: {
			pageImgList(val) {
				this.imgList = [];
				this.imgList = this.imgList.concat(val);
			}
		},
		data() {
			return {
				imgList: [],
				images: "",
				imgLists: [],
				src: "", //视频存放
				xuanze: ['图片', '视频'],
				show: 0,
				lshowsrc: [],
				showvideo:true
				


			}
		},
		mounted() {
			this.imgList = [];
			this.imgList = this.imgList.concat(this.pageImgList);
		},
		methods: {
			playvideo(e) {
					if(this.showvideo){
						this.videoContext = uni.createVideoContext('myVideo', this);
						this.videoContext.requestFullScreen({
							direction: 0
						});
						this.videoContext.play()
					}				
			},
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.pause()
					this.showvideo = true
				} else{
					this.showvideo = false
				}
			},
			chooseVideoImage() {
				uni.showActionSheet({
					title: "选择上传类型",
					itemList: this.xuanze,
					success: (res) => {
						console.log(res)
						if (this.show == 0) {
							if (res.tapIndex == 0) {
								this.show = 1
								this.xuanze = ['图片']
								this.ChooseImage()
							} else {
								this.show = 2
								this.xuanze = ['视频']
								this.chooseVideo()
							}
						} else if (this.show == 1) {
							this.ChooseImage()
						} else if (this.show == 2) {
							this.chooseVideo()
						}

					}
				})
			},
			ChooseImage() {
				let _count = this.imgCount - this.imgList.length;

				uni.chooseImage({
					count: _count, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						let _allCount = this.imgList.length + res.tempFilePaths.length;
						if (_allCount > 9) {
							uni.showToast({
								title: '最多只能上传9张照片',
								icon: 'none'
							});
						} else {
							uni.showLoading({
								mask: true,
								title: '图片上传中...'
							});
							if (this.imgList.length > 0) {
								this.imgLists = []
								this.imgList = this.imgList.concat(res.tempFilePaths);
								for (var i = 0; i < this.imgList.length; i++) {
									uni.getFileSystemManager().readFile({ //把本地图片转成64
										filePath: this.imgList[i],
										encoding: 'base64',
										success: (r) => {
											this.images = 'data:image/png;base64,' + r.data
											this.imgLists.push(this.images);
											uni.hideLoading();											
											this.$emit("addImg", this.imgLists,0);
										}
									})

								}
							} else {

								this.imgList = res.tempFilePaths;
								for (var i = 0; i < this.imgList.length; i++) {
									uni.getFileSystemManager().readFile({ //把本地图片转成64
										filePath: this.imgList[i],
										encoding: 'base64',
										success: (r) => {
											this.images = 'data:image/png;base64,' + r.data
											this.imgLists.push(this.images);
											uni.hideLoading();
											this.$emit("addImg", this.imgLists,0);
										}
									})

								}
							}

						}

					}
				});
			},
			//图片预览
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//删除
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1);
							this.imgLists.splice(e.currentTarget.dataset.index, 1);
							this.$emit("addImg", this.imgLists,0);
						}
					}
				})
			},
			chooseVideo() {
				// 上传视频
				var self = this;
				uni.chooseVideo({
					count: 1,					
					sourceType: ['camera', 'album'],
					success: function(res) {							
						if(res.duration > 60.999){
							uni.showModal({
								title: '友情提示',
								content: '视频时长不能超过60s，请重新选择！'
								
							})
						} else if(res.size>26214400){
							uni.showModal({
								title: '友情提示',
								content: '视频大小不能超过25M，请重新选择！'
								
							})
						} else{
							self.lshowsrc = []
							uni.uploadFile({
								url: "https://chijiuanquan.com/api/wxclassring/upload_video",
								method: "POST",							
								filePath: res.tempFilePath,
								name: 'file',
								success: (res) => {																
									self.src = res.data;
									self.lshowsrc.push(self.src);								
									self.$emit("addImg", self.lshowsrc,1);								
								}
							})
						}
																
					}
				});
			},
			delectVideo() {
				uni.showModal({
					title: "提示",
					content: "是否要删除此视频",
					success: (res) => {
						if (res.confirm) {
							this.src = ''							
							this.$emit("addImg",[],1);
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	image {
		max-width: 100%;
		display: inline-block;
		position: relative;
		z-index: 0;
	}

	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}

	.cu-bar .action {
		display: flex;
		align-items: center;
		height: 100%;
		justify-content: center;
		max-width: 100%;
	}

	.cu-bar .action:first-child {
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	.cu-bar .action:last-child {
		margin-right: 30upx;
		font-size: 26rpx;
	}

	.cu-form-group {
		background-color: #ffffff;
		padding: 1upx 30upx;
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}

	.cu-form-group.content {
		padding: 30rpx;
	}

	.cu-form-group>text[class*="iconfont"] {
		font-size: 36upx;
		padding: 0;
		box-sizing: border-box;
	}

	/* grid布局 */

	.grid {
		display: flex;
		flex-wrap: wrap;
	}

	.grid.grid-square {
		overflow: hidden;
	}

	.grid.grid-square .cu-tag {
		position: absolute;
		right: 0;
		top: 0;
		border-bottom-left-radius: 6upx;
		padding: 6upx 12upx;
		height: auto;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.grid.grid-square>view>text[class*="iconfont"] {
		font-size: 52upx;
		position: absolute;
		color: #8799a3;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.grid.grid-square>view {
		margin-right: 20upx;
		margin-bottom: 20upx;
		border-radius: 6upx;
		position: relative;
		overflow: hidden;
	}

	.grid.grid-square>view.bg-img image {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.grid.grid-square>view.bg-img video {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.grid.col-4.grid-square>view {
		padding-bottom: calc((100% - 60upx)/4);
		height: 0;
		width: calc((100% - 60upx)/4);
	}

	.grid.grid-square>view.bg-img image {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.grid.col-4.grid-square>view:nth-child(4n) {
		margin-right: 0;
	}

	.cu-tag {
		font-size: 24upx;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0upx 16upx;
		height: 48upx;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
	}

	// .solids::after {

	// }

	.solids {
		position: relative;
		border: 6rpx dashed #cbcaca !important;
		border-radius: 15rpx !important;
	}

	.solids::after {
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: inherit;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
	}

	.flex-sub {
		flex: 1;
	}

	.margin-top {
		margin-top: 30rpx;
	}

	.bg-red {
		background-color: #e54d42;
		color: #ffffff;
	}

	.bg-white {
		background-color: #ffffff;
		color: #666666;
	}

	@font-face {
		font-family: "iconfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO0AAsAAAAAB8gAAANmAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDLIMAATYCJAMMCwgABCAFhG0HOxvLBhGFtJF9JMZuoxsmj0QXU6OrNrbB86gz35dkn2K4KwDDxoGpAIxb12Zj2n6O8zPyVZf881//DNuZtDu9NGV5nMYIsAgJEofPczm9FnjZ/JblMtbWPfioF2AcUGBjD02ogALihrErL2I9BPDIQymkUZNWnbAYjG4CyKjhQ/tjU1ZMTaFgEdySsQaZj4NVM9RtYJ7/fflFBbGgcDRG33bUeBD1/nZ/e6+jySi9XALZeG6ATQINlAIMSJ9Sb7eeDqOl0HiK1tRnuhgENVYgmQRfqurdlf7xFIiLkR8AUAyaFSclswUQ+PZeAnWcvx9cFJ8P7EaMTPsITp4gEuSqPLlL12WxnTMzdeqydGahxdHsnTs5D94xK2vXzktmFd0VG/jsWdenT7s8ftzpyZOeRx5E7898GHvUxZu5PbrD92ftiu0c60lP//ZM5LNZsmPWLpFydaeyBVV0eabUpStFx1b5/rasDf36Swr7y+Q5s3gNlnre5kz1vMP3c6k1DyqnHXuUV8M+5e6fvHrr6tW3xe4U+3/udpj6p0TtvyU+XTHSr/4t9qbY36tQlB5cp2AJXhxuJD17SGNp2LNnI08ci6GIpDd21s/oPKOrXTK7Tp1QchDChuSQDpPKGGH6HBJgJjkJWYHkSP/eMF3OdN23hhJkTX2/v/7+96nx8EMwlzktttaYQ8nz6XKkO5+j+tz015ndYmq7TJOEm7Fd/XYZJ9nC9Al8jI46n9oIoNerzx/3GyZGxu68ba1/1jcAvE6+zr7Z0M4P9rZ8Ar9J1rLMqArDpo0staV6QjOB8Uuw4Kk6fk4xQAZ+++sztw6DYFMyBkUKuaGxFKIYRik4+FSCi6UuPEriTvbJiDBETAQowTuAkI4PKFI5B006vimG8QOHLPzDJZ1oeHSRjHP6FJHhi4aCgWIM4StkEddkOXQRFN4w6cpAkgqf/YjSZgGwDSubcLFGGWNA+5Q4qgQkXMEVbIZlydAI5xipkao2F9OkshcZEVe9BQ0RkAAFiQFCXgEyIpgacqsri9znbyAJHSUBUkOqCD+CCC1Z/YCNgdWC4mrrVqRruaTliQQHRSEAQmAqgCtwI6UZZYCmvFUOEqEYpD3CDRdMVInaao359dXzrQE8jPm0KNFiSJmYBnWUdtNxQfYWebjXAwAA') format('woff2');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-shanchu:before {
		content: "\e6ac";
	}

	.icon-paizhao:before {
		content: "\e7e0";
	}
	.videobox{
		width: 400rpx !important;
		height: 200rpx !important;
	}
</style>
